<template>
  <p-form-model
    ref="form"
    :model="form"
    :rules="isEdit ? rules : undefined"
    :class="{ 'form-view-container': !isEdit }"
  >
    <div class="item item-left">
      <p-form-model-item :label="label.serialNumber" prop="serialNumber">
        <span>{{ form.serialNumber }}</span>
      </p-form-model-item>
      <p-form-model-item :label="label.name" prop="name">
        <p-input v-model="form.name" :disabled="!isEdit" placeholder="请输入" />
      </p-form-model-item>

      <p-form-model-item ref="time" :label="label.startTime" prop="startTime">
        <template v-if="isEdit">
          <p-input v-show="false" v-model="form.startTime"></p-input>
          <MonthRangPicker
            :disabled="!isEdit"
            :start.sync="form.startTime"
            :end.sync="form.endTime"
            @blur="
              () => {
                $refs.time.onFieldBlur();
              }
            "
            @change="
              () => {
                $refs.time.onFieldChange();
              }
            "
          />
        </template>
        <span v-else>
          {{ form.startTime | formatDate('YYYY-MM') }} ~
          {{ form.endTime | formatDate('YYYY-MM') }}
        </span>
      </p-form-model-item>
      <p-form-model-item
        :label="label.operatingOrganization"
        prop="operatingOrganization"
      >
        <SelectOrg
          :value="form.operatingOrganization"
          :has-all="false"
          :disabled="!isEdit"
          :options="operateOptions"
          :allow-clear="false"
          @input="handleDeparChange"
        />
      </p-form-model-item>
    </div>
    <div class="item item-right">
      <p-form-model-item :label="label.currStatus">
        <span>{{ stateOptions[form.currStatus] || '草稿' }}</span>
      </p-form-model-item>
      <p-form-model-item
        :label="label.salesOrganization"
        prop="salesOrganization"
      >
        <SelectOrg
          :value="form.salesOrganization"
          :has-all="false"
          :disabled="!isEdit"
          :allow-clear="false"
          @input="handleOrgChange"
        />
      </p-form-model-item>
      <p-form-model-item :label="label.deadline" prop="deadline">
        <p-date-picker
          :value="form.deadline"
          show-time
          :allow-clear="false"
          :disabled="!isEdit"
          :disabled-date="disabledDate"
          placeholder="请选择时间"
          value-format="YYYY-MM-DD HH:mm:ss"
          @change="handleDeadLineChange"
          @ok="handleDeadLineOk"
        />
      </p-form-model-item>
      <p-form-model-item :label="label.responsibleId" prop="responsibleId">
        <SelectUser
          :value="form.responsibleId"
          :has-all="false"
          :allow-clear="false"
          :disabled="!isEdit"
          :parent-id="parentId"
          @input="handleUserChange"
        />
      </p-form-model-item>
    </div>
  </p-form-model>
</template>

<script>
import monent from 'moment';
import SelectUser from '@/components/select/SelectUser.vue';
import MonthRangPicker from '@/components/picker/MonthRangePicker.vue';
import { FORECAST_TYPE as PAGE_TYPE } from '@/constants/index';

export default {
  components: {
    SelectUser,
    MonthRangPicker,
  },
  props: {
    form: {
      type: Object,
      default: () => {},
    },
    isEdit: {
      type: Boolean,
      default: true,
    },
    dataSource: {
      type: Array,
      default: () => [],
    },
    pageType: {
      type: String,
      default: 'M9',
    },
  },
  data() {
    this.PAGE_TYPE = PAGE_TYPE;
    return {
      rules: {
        name: [{ required: true, message: '请输入M+9名称！', trigger: 'blur' }],
        salesOrganization: [
          { required: true, message: '请选择销售组织', trigger: 'blur' },
        ],
        startTime: [
          {
            required: true,
            message: '请选择长度区间',
            trigger: 'change',
          },
        ],
        deadline: [
          { required: true, message: '请选择录入截止时间', trigger: 'change' },
        ],
        operatingOrganization: [
          { required: true, message: '请选择运营部门', trigger: 'blur' },
        ],
        responsibleId: [
          { required: true, message: '请选择运营责任人', trigger: 'blur' },
        ],
      },
      isFirst: true,
      parentId: '',
    };
  },

  computed: {
    operateOptions() {
      return this.$store.getters.getOrg({
        code: this.form.salesOrganization,
        type: 'operation',
        isDict: false,
      });
    },
    label() {
      return {
        serialNumber: `${this.PAGE_TYPE[this.pageType]}编号`,
        name: `${this.PAGE_TYPE[this.pageType]}名称`,
        startTime: `${this.PAGE_TYPE[this.pageType]}长度区间`,
        currStatus: '当前状态',
        salesOrganization: '销售组织',
        deadline: '录入截止时间',
        operatingOrganization: '运营部门',
        responsibleId: '运营责任人',
      };
    },
    stateOptions() {
      return this.$store.state.dictionary.dict['state'] || {};
    },
    uid() {
      return this.$store.state.user.uid;
    },
  },
  watch: {
    'form.operatingOrganization': {
      handler(val) {
        console.log('val: ', val);
        this.parentId = val;
      },
      immediate: true,
    },
  },
  methods: {
    disabledDate(val) {
      return monent().endOf('day').subtract(1, 'day').valueOf() > val.valueOf();
    },
    handleOrgChange(val, isDefault) {
      if (this.form.salesOrganization && !isDefault && this.dataSource.length) {
        this.$confirm('该操作将清空销售责任人的列表信息，是否确认？')
          .then(() => {
            this.form.salesOrganization = val;
            this.$emit('clear-list');
          })
          .catch(() => {
            // console.log('e: ', e);
          });
      } else {
        this.form.salesOrganization = val;
        this.form.operatingOrganization = '';
      }
    },
    handleDeparChange(val) {
      console.log('val: ', val);
      this.form.operatingOrganization = val;
      this.parentId = val;
      this.form.responsibleId = '';
    },
    handleUserChange(val) {
      console.log('userVal:', val);
      this.form.responsibleId = val;
    },
    setForm(serialNumber) {
      this.form.serialNumber = serialNumber;
    },
    validate() {
      return new Promise((resolve) => {
        this.$refs.form.validate((valid) => {
          resolve(valid);
        });
      });
    },
    handleRangeChange(value) {
      this.form.startTime = value;
    },
    handleDeadLineChange(value) {
      const formatTime = monent(value).format('YYYY-MM-DD HH:mm:ss');
      this.form.deadline = formatTime;
    },
    handleDeadLineOk(value) {
      const formatTime = monent(value).format('YYYY-MM-DD HH:mm:ss');
      this.form.deadline = formatTime;
    },
  },
};
</script>

<style lang="less" scoped>
.form-view-container {
  margin-bottom: 20px;
  /deep/ .poros-input {
    border: none;
  }
  /deep/ .poros-input[disabled] {
    background: transparent;
    cursor: default;
    color: #040c2c;
    padding-left: 0;
  }
  /deep/ .poros-form-item {
    margin-bottom: 0;
  }
  /deep/ .poros-select-selection {
    border: none;
  }
  /deep/ .poros-select-disabled .poros-select-selection {
    background: transparent;
    cursor: default;
    color: #040c2c;
  }
  /deep/.poros-select-selection__rendered {
    margin-left: 0;
  }
  /deep/ .poros-select-arrow {
    display: none;
  }
  /deep/ .anticon-calendar {
    display: none;
  }
  /deep/ .poros-form-explain {
    display: none;
  }
}

.poros-form {
  display: flex;
  justify-content: space-between;
  position: relative;
  float: left;
}
.poros-form-item {
  display: flex;
  //   margin-bottom: 10px;
}
.item {
  width: 48%;
  display: inline-block;
}
// .poros-form-item {
//   width: 48%;
// }
/deep/ .poros-form-item-label {
  width: 120px;
  margin-right: 20px;
}
/deep/ .poros-form-item-control-wrapper {
  width: calc(100% - 180px);
}
</style>
